<template>
  <div class="movie">
    <p>我想看的电影名字只能是5个字的</p>
    <ul>
      <li v-for="movie in myMovieList" :key="movie.tvId">
        {{ movie.albumName }}
      </li>
    </ul>
    <br />
    <h1>我想看的电影名字必须是我传递的长度</h1>
    <ul>
      <li v-for="movie in yourMovieList" :key="movie.tvId">
        {{ movie.albumName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Movie",
  computed: {
    myMovieList() {
      return this.$store.getters.myMovieList;
    },
    yourMovieList(){
      //当getters中的计算属性值是一个函数的时候，需要在使用的时候调用
      //但是这样的化就可以传递参数了
      // getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果
       return this.$store.getters.yourMovieList({ a: 2, b: 4 });
    }
  },
};
</script>

<style scoped>
.movie {
  background: pink;
  margin: 30px;
}
</style>